"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform } from "react-native"
import { theme } from "../../constants/theme"
import { WordDetailSheet } from "./WordDetailSheet"

// 后缀数据
const SUFFIX_DATA = [
    { suffix: "-tion", count: 132, meaning: "表示行为、状态或过程" },
    { suffix: "-ly", count: 118, meaning: "表示方式或状态" },
    { suffix: "-ment", count: 89, meaning: "表示行为���结果或状态" },
    { suffix: "-ity", count: 78, meaning: "表示性质或状态" },
    { suffix: "-ness", count: 67, meaning: "表示性质、状态或程度" },
    { suffix: "-ize", count: 56, meaning: "使...化；使成为" },
    { suffix: "-ful", count: 49, meaning: "充满...的；具有...的" },
    { suffix: "-able", count: 45, meaning: "能...的；可...的" },
    { suffix: "-less", count: 41, meaning: "无...的；不...的" },
    { suffix: "-er", count: 38, meaning: "表示人或物；比较级" },
    { suffix: "-ist", count: 36, meaning: "表示人或主义者" },
    { suffix: "-ous", count: 34, meaning: "具有...的；如...的" },
    { suffix: "-al", count: 32, meaning: "属于...的；有...性质的" },
    { suffix: "-ive", count: 30, meaning: "有...性质的；有...倾向的" },
    { suffix: "-ish", count: 28, meaning: "像...的；有点..." },
    { suffix: "-ance", count: 26, meaning: "表示行为、状态或性质" },
    { suffix: "-ence", count: 24, meaning: "表示行为、状态或性质" },
    { suffix: "-ic", count: 22, meaning: "...的；与...有关的" },
    { suffix: "-ary", count: 20, meaning: "与...有关的；...的" },
    { suffix: "-ate", count: 18, meaning: "使...；变成..." },
    { suffix: "-ify", count: 16, meaning: "使...；变成..." },
    { suffix: "-ism", count: 14, meaning: "表示主义、行为或状态" },
    { suffix: "-hood", count: 12, meaning: "表示状态、性质或时期" },
    { suffix: "-ship", count: 10, meaning: "表示状态、关系或技能" },
    { suffix: "-dom", count: 8, meaning: "表示领域、状态或集合" },
]

// 示例词数据
const SUFFIX_EXAMPLES = {
    "-tion": [
        {
            word: "creation",
            phonetic: "/kriˈeɪʃn/",
            meaning: "创造；创作",
            description: "creation：创造的行为或结果，表示创造出的事物",
            parts: [
                {
                    text: "create",
                    meaning: "创造，创作",
                },
                {
                    text: "tion",
                    meaning: "表示行为或过程",
                },
            ],
        },
        {
            word: "education",
            phonetic: "/ˌedʒuˈkeɪʃn/",
            meaning: "教育；培养",
            description: "education：教育的过程，传授知识和培养能力",
            parts: [
                {
                    text: "educate",
                    meaning: "教育，培养",
                },
                {
                    text: "tion",
                    meaning: "表示行为或过程",
                },
            ],
        },
    ],
    "-ly": [
        {
            word: "quickly",
            phonetic: "/ˈkwɪkli/",
            meaning: "快速地；迅速地",
            description: "quickly：以快速的方式，表示动作的速度快",
            parts: [
                {
                    text: "quick",
                    meaning: "快的，迅速的",
                },
                {
                    text: "ly",
                    meaning: "表示方式或状态",
                },
            ],
        },
    ],
}

export default function SuffixTab() {
    const [selectedSuffix, setSelectedSuffix] = useState<string | null>(null)

    const handleSuffixPress = (suffix: string) => {
        setSelectedSuffix(suffix)
    }

    return (
        <View style={styles.container}>
            {/* 后缀统计 */}
            <View style={styles.statsContainer}>
                <Text style={styles.statsText}>
                    共 <Text style={styles.statsHighlight}>{SUFFIX_DATA.length}</Text> 个常用后缀
                </Text>
            </View>

            {/* 后缀列表 */}
            <ScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.scrollContent}
                showsVerticalScrollIndicator={false}
            >
                <View style={styles.suffixGrid}>
                    {SUFFIX_DATA.map((item) => (
                        <TouchableOpacity
                            key={item.suffix}
                            style={styles.suffixItem}
                            onPress={() => handleSuffixPress(item.suffix)}
                        >
                            <View style={styles.suffixContent}>
                                <Text style={styles.suffixText}>{item.suffix}</Text>
                                <View style={styles.countBadge}>
                                    <Text style={styles.countText}>{item.count}</Text>
                                </View>
                            </View>
                            <Text style={styles.meaningText} numberOfLines={1}>
                                {item.meaning}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </ScrollView>

            {/* Word Detail Sheet */}
            <WordDetailSheet
                visible={!!selectedSuffix}
                onClose={() => setSelectedSuffix(null)}
                affix={selectedSuffix || ""}
                type="suffix"
                examples={selectedSuffix && SUFFIX_EXAMPLES[selectedSuffix] ? SUFFIX_EXAMPLES[selectedSuffix] : []}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    statsContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    statsText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    statsHighlight: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    scrollView: {
        flex: 1,
    },
    scrollContent: {
        padding: theme.spacing.lg,
        paddingTop: 0,
    },
    suffixGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
    },
    suffixItem: {
        width: "31%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 3,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    suffixContent: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.xs,
    },
    suffixText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    countBadge: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.small,
        paddingHorizontal: 6,
        paddingVertical: 2,
    },
    countText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    meaningText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
    },
})

